@charset "windows-1251";
/* CSS Mobile  forInformTrend-redisign*/

/******************* common mobile style ********************************/

@media screen and (max-width:1320px){
#content {margin: 12px 5% 5%;}
	.top-panel {position: absolute;}
	.menu-box {top:0; padding-top: 10px;}


	header {
		border: 0px solid red;
		height: 50vh;
	}
	main {padding:0 1.25rem;}
	.right-menu {padding-top: 80px;}
	.bannertext  {}
	.bannertext > div, .footer .tel a, .footer .email a {font-size:2.4rem;}
	.hello {right: 3.5%}
	.footer .width-content {padding:0 3.5%;}
	.four-columns  > div {max-width:22%;}
	.speechbox {padding-left: 1.25rem; padding-right:1.25rem; }
	.speech {font-size: 95%;}
}

@media screen and (max-width:980px){
	header {
		border: 0px solid green;
		height: 45vh;
	}
	.top-urls > a {font-size: 16px !important; 	margin-left: 18px !important;}
	main {padding:0 1.25rem;}
	.bannertext > div, .footer .tel a, .footer .email a {font-size:2.2rem;}
	.speech > div {margin:0.3rem 0;}
	.speech {font-size: 90%;}
	.four-columns  > div {max-width:48%;}
	.footer .width-content {padding:0 3.5%;}
	.contacts {min-width: auto;}
	.speech {font-size:12px;}
	.random > span:last-child {height: 26px;}
  .random span {padding-right: 8px;}
	.document-flow-case {min-height: 200px;}
	.flow-chart {border-right: 1px solid #00bbe4;}
	.gantt-chart {border-right: 1px solid #00bbe4;}
	.devices {border-right: 1px solid #00bbe4;}
}


@media screen and (max-width:820px){
	header {
		border: 0px solid blue;
		height: 40vh;
		min-height: 300px;
	}
	body.scrolled .sitemap {overflow-y: scroll;}
	.top-urls > a {font-size: 14px !important; 	margin-left: 12px !important;}
	main {font-size:95%; margin-top: 1.5rem;}
	h1 {font-size:1.6rem;}
	.bannertext > div, .footer .tel a, .footer .email a {font-size:2rem;}
	.quote {top: 0;  margin: 0 0 2.625rem 1rem;}
	.four-columns  > div, .three-columns  > div {max-width:48%;}
	.footer .width-content {padding:0 3.5%;}
	.speech {font-size:12px;}
	.contacts {display:none;}
	.water-sign p {font-size: 10rem; line-height: 0.7;}
	.water-sign div {left: 8%; top: 8%;}
	.water-sign div p {line-height: 0.6;}
	 #cards-mobile .water-sign div p {line-height: 1.3;}
	 #cards-mobile .single-card { min-height: 260px;}
	 .document-flow-case {min-height: 230px;}

}



@media screen and (max-width:700px){
	header {
		border: 0px solid orange;
		height: 35vh;
	}
    main {font-size:90%; }
	h1 {font-size:1.4rem;}
	.menu-box {padding-bottom: 0;}
	.top-urls > a {font-size: 12px ; margin-left: 10px;}
	.bannertext > div, .footer .tel a, .footer .email a {font-size:1.8rem;}
	.four-columns  > div, .three-columns  > div {max-width:48%;}
	.footer .width-content {padding:3.5% 3.5% 0;}
	.speechbox {display:none;}
	.menu-main {font-size: 12px;}
	.quote {margin-left:0;}
}



@media screen and (max-width:576px){
	p {font-size: 85%;}
	.small {font-size:70%;}
	.table-th {font-size: 0.9rem; padding: 6px;}
	.functional p:first-child {font-size: 90%; line-height: 1.2; }
	.functional p {font-size: 90%; line-height: 1; margin-bottom: 6px;}
	.top-panel {position: fixed;}
	body.crossing .top-panel {position: fixed;}

	header {
		height: 35vh;
		border: 0px solid aqua;
	}
	main {font-size:85%;}
	h1 {font-size:1rem;}
	h2{font-size:1rem;}
	.top-panel {border:0px solid red;}
	.top-panel a.logo > img, .footer a.logo > img {
    max-width: 75%;
    max-height: 75%;
}
	.ico-menu {top: 1px;}
	.top-urls a {display: none;}
	.top-urls a.ico-menu {display: block; float: right;}
	.bannertext > div, .footer .tel a, .footer .email a {font-size:1.2rem;}
	.menu-box {padding:20px 1.25rem; top:60px;}
	.menu-main {margin: 0 1.25rem 20px;}
	.menu-main a {padding: 0; text-align: center;}
	.hello a {font-size:75%;}
	.clients p {text-align: justify;}
	.four-columns  > div, .three-columns  > div {max-width:100%; margin-bottom:1.5rem;}
	.footer .width-content {padding:3.5% 3.5% 0;}
	.footer .menu-bottom > a {font-size: 12px; margin-right: 10px;}
	.footer {min-height: 440px;}

	/*Лого снизу, ссылки сверху)
	.footer {-webkit-flex-direction: column-reverse !important; flex-direction: column-reverse !important;}
	.footer div.logo { -webkit-flex-direction: row !important; flex-direction: row !important;}*/
	.footer p, .footer a { font-size: 0.9rem;}

	.water-sign p {font-size: 5rem; }
	.water-sign div {left: 0; top: 0;}
	.water-sign div p {line-height: 1.5; font-size: 0.6rem; margin-bottom: 0;}

	#its-tabs1 > div:first-child div p:first-child, #its-tabs2 > div:first-child div p:first-child {line-height: 1.5; font-size: 45%;}
	.tabs-its-content p {font-size: 40%;}


	.header-standart, .tabs-its > div a, .tabs-pricesits > div a, .tabs-pricesits-inner1 > div a, .tabs-pricesits-inner2 > div a {font-size: 90%; line-height: 1;}
	.tabs-its > div a, .tabs-pricesits > div a {display: inline-block; min-height: 110px;}
  .tabs-pricesits-inner1 > div a, .tabs-pricesits-inner2 > div a {display: inline-block; min-height: 80px; font-size: 65%;}
	.tabs-pricesits-inner1-content > div div p:first-child, .tabs-pricesits-inner2-content > div div p:first-child {line-height: 3; font-size: 65%;}
	.tabs-pricesits-inner1-content > div div p:nth-child(2), .tabs-pricesits-inner2-content > div div p:nth-child(2), .tabs-pricesits-inner1-content > div div p:nth-child(3), .tabs-pricesits-inner2-content > div div p:nth-child(3) {font-size: 65%; margin-bottom: 1rem;}
	.tabs-pricesits-inner1-content > div div p:nth-child(4), .tabs-pricesits-inner2-content > div div p:nth-child(4) {font-size: 45%;}
	.tabs-services > div a {padding: 2px 4px; font-size: 70%; line-height: 1;}



	 #cards-mobile .water-sign div p {line-height: 1.3;}
	 #cards-mobile .single-card > p {font-size: 15rem;}
	 #cards-mobile.cards > ul {border: 0px solid red; flex-wrap: wrap;  -webkit-flex-wrap: wrap;}
	 #cards-mobile .single-card {min-height: 260px}
	 #cards-mobile.cards  ul li {width:49%; }
	 #cards-mobile.cards  ul li ul li {width:100%; margin-bottom: 6px !important;}
	 #cards-mobile .front > p:first-child {font-size: 1rem; height: 184px; }
}
}